<template>
    <div class="page" ref="topDiv">
        <div class="artical">
            <Button class="artical_button" @click="close">关闭</Button>
            <Spin size="large" fix v-if="spinShow"></Spin>
            <p class="artical_title">{{notice.title}}</p>
            <div class="artical_info" v-if="this.$route.query.type == 0"><!--来源：{{notice.orgName}}-->
                发布单位：{{notice.orgName}} 发布人：{{notice.userName}} 发布时间：{{notice.createDate}} 浏览数：{{notice.browse}}
            </div>
            <div class="artical_info" v-else><!--来源：{{notice.orgName}}-->
                发布时间：
            </div>
            <div class="artical_file" v-if="uploadList2.length>0">
                <span>附件：</span>
                <div v-show="uploadList2.length>0" v-for="(item, index) in uploadList2" :key='item'  style="display: inline-block;">
                    <a @click="downloadFile(notice.proposalId,item)">{{ item.fileName }}</a>
                    <Divider type="vertical" v-if="(uploadList2.length -1) != index"/>
                </div>
            </div>
            <div class="down_info">
                <p class="down_red_line_1"> </p>
            </div>
           <!-- <div class="artical_content" v-html="notice.content"></div>
            <p class="artical_date">{{notice.createDate}}</p>-->

            <iframe v-if='filePdf' frameborder="0" align="middle" height="100%" width="100%" :src="filePdf" style="margin-top:3px;width: 98%;text-align:center;height:700px"></iframe>
        </div>
    </div>
</template>

<script>

import {Api} from '../../../api/index.js'
import ImgDetails from "../../imgDetails";

export default {
    components: {ImgDetails},
    data() {
         return {
             uploadList:[],
             uploadList2:[],
             spinShow:true,
             type1Clicked: true,
             type2Clicked: false,
             type3Clicked: false,
             notice:{},
             filePdf:'',
             fileUrl: Api.interestedPartiesUserFile,
             fileName:null
        }
    },
    mounted(){
        this.$refs.topDiv.style.height = window.innerHeight;
        if (this.$route.query.type == 0) {
            this.$http.get(Api.getNotice+"/"+this.$route.query.id+"?userId=" + this.$route.query.userId).then(res => {
                if(res.data.status == 200){
                    this.notice = res.data.data;
                    this.notice.createDate = this.formatDate(new Date(this.notice.createDate), 'yyyy-MM-dd');
                }
            }).catch(e => {
                this.$Message.error("数据获取失败")
            });
        }else {
            this.notice.title = this.$route.query.name
            this.notice.createDate = this.$route.query.createDate
        }
        this.getFiles();
        this.getFiles2();
    },
    methods:{
        downloadFile(guideId, file) {
            let url = this.fileUrl + '/file/' + file.id;
            this.$http.get(url, {
                responseType: 'blob'      //告诉服务器我们需要的响应格式
            }).then((res) => {
                const aLink = document.createElement("a");
                let blob = new Blob([res.data], {
                    type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
                });
                aLink.href = URL.createObjectURL(blob)
                aLink.download = file.fileName //标题
                aLink.click()
                document.body.appendChild(aLink)
            })
        },
        getFiles() {
            // this.filePdf='http://localhost:30032/read_time_info/fileOs/5fec1e9da14000009c007802'
            let url = ''
            if (this.$route.query.type == 0) {
                url = this.fileUrl + '/' + this.$route.query.id + 'Pdf/files/notice'
            }else if (this.$route.query.type == 1){
                url=  Api.uploadPTWFiles + '/' + this.$route.query.id + '/files/doc'
            }else if (this.$route.query.type == 2){
                url=  Api.uploadPTWFiles + '/' + this.$route.query.id + '/files/pdf'
            }else if (this.$route.query.type == 4){
                url=  Api.uploadPTWFiles + '/' + this.$route.query.id + '/files/video'
            }else{
                url=  Api.uploadPTWFiles + '/' + this.$route.query.id + '/files/picture'
            }
            this.$http.get(url).then((res) => {
                if (res.data.result == "success") {
                    this.uploadList = res.data.data
                    if (res.data.data.length > 0) {
                        // this.filePdf = this.fileUrl + '/fileOs/' +this.uploadList[0].id+"#nameddest="+this.uploadList[0].fileName;
                     //   this.filePdf = this.fileUrl + '/fileOs/' +this.uploadList[0].id+'/1'  //+this.uploadList[0].fileName.replace('/','|');
                         this.filePdf = Api.viewPicture + this.uploadList[0].filePath;
                        this.fileName=this.uploadList[0].fileName.replace('/','|')
                    }else{
                        if (this.$route.query.type == 0) {
                            url = this.fileUrl + '/' + this.$route.query.id + '/files/notice'
                            this.$http.get(url).then((res) => {
                                if (res.data.result == "success") {
                                    this.uploadList = res.data.data
                                    if (res.data.data.length > 0) {
                                        // this.filePdf = this.fileUrl + '/fileOs/' +this.uploadList[0].id+"#nameddest="+this.uploadList[0].fileName;
                                        //   this.filePdf = this.fileUrl + '/fileOs/' +this.uploadList[0].id+'/1'  //+this.uploadList[0].fileName.replace('/','|');
                                        this.filePdf = Api.viewPicture + this.uploadList[0].filePath;
                                        console.log(this.filePdf);
                                        this.fileName = this.uploadList[0].fileName.replace('/', '|')
                                    }
                                }
                            });
                        }
                    }
                    this.spinShow=false
                }
            }).catch(e => {
                this.$Message.error("文件读取失败");
                this.spinShow = false;
            });
        },
        getFiles2(){
            this.$http.get(Api.uploadPTWFiles  + '/' + this.$route.query.id + '/files/all',{
                params: {},
            }).then((res) => {
                this.uploadList2 = res.data.data
            })
        },
        queryNotice(type){
           if(type == '1'){
               this.type1Clicked = true;
               this.type2Clicked = false;
               this.type3Clicked = false;
           }else if(type == '2'){
               this.type1Clicked = false;
               this.type2Clicked = true;
               this.type3Clicked = false;
           }else if(type == '3'){
               this.type1Clicked = false;
               this.type2Clicked = false;
               this.type3Clicked = true;
           }
        },
        close(){
            // window.opener=null;
            // window.open('',self);
            window.close();
        },
        formatDate(date, fmt) {
            if (/(y+)/.test(fmt)) {
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
            }
            let o = {
                'M+': date.getMonth() + 1,
                'd+': date.getDate(),
                'h+': date.getHours(),
                'm+': date.getMinutes(),
                's+': date.getSeconds()
            };
            for (let k in o) {
                if (new RegExp(`(${k})`).test(fmt)) {
                    let str = o[k] + '';
                    fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
                }
            }
            return fmt;
        },
        padLeftZero(str) {
            return ('00' + str).substr(str.length);
        },
    },
    computed:{
        clicked1Class:function(){
            return {
                type1ClickedClass : this.type1Clicked,
            }
        },
        clicked2Class:function(){
            return {
                type2ClickedClass : this.type2Clicked,
            }
        },
        clicked3Class:function(){
            return {
                type3ClickedClass : this.type3Clicked,
            }
        }
    }

}

</script>


<style scoped>

.page{
    min-width:1250px;
    /*height: 100vh;*/
    overflow-y: auto;
    background: #F3F4F8;
    display:flex;
    margin:auto;
    justify-content: center;
}

.artical{
    width: 1000px;
    margin-top:20px;
    margin-bottom: 10px;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: auto;

}

.artical_button{
    margin-left: 890px;
    margin-top:14px;
    width: 60px;
    height: 28px;
    background: #D80200;
    border-radius: 4px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #FFFFFF;
}

.artical_title{
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #D80200;
    line-height: 40px;
}

.artical_info{
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
}

.artical_content{
    margin-top: 38px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
    padding-left: 90px;
    padding-right: 90px;
    background: white;
}

.down_info{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.down_red_line_1{
    margin-top:3px;
    width:820px;
    height: 1px;
    color:white;
    background-color: red;
}

.artical_date{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
    padding-left: 800px;
    width: 960px;
    background: white;
    margin-bottom: 60px;
    padding-bottom: 20px
}

.artical_file{
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 30px;
    padding-left: 90px;
    width: 960px;
    background: white;
}

</style>
